<template>
    <div>
        <el-card class="box-card">
            <!--面包屑导航-->
            <div slot="header" class="clearfix">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>发布文章</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <!--发布信息的表单-->
            <el-form ref="article" :model="article" label-width="60px" :rules="rules">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="article.title"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <el-tiptap
                            v-model="article.content"
                            :extensions="extensions"
                            lang="zh"
                            height="350"
                    ></el-tiptap>
                </el-form-item>
                <el-form-item label="封面" prop="picture">
                    <el-radio-group v-model="article.picture.type">
                        <el-radio :label="1">单图</el-radio>
                        <el-radio :label="3">三图</el-radio>
                        <el-radio :label="0">无图</el-radio>
                        <el-radio :label="-1">自动</el-radio>
                    </el-radio-group>
                    <div class="cover-box" v-if="article.picture.type > 0">
                        <publish-cover
                                v-for="(value, index) in article.picture.type"
                                v-model="article.picture.image[index]"
                                :key="index"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="频道" prop="channel">
                    <el-select v-model="article.channel" placeholder="请选择活动区域">
                        <el-option label="前端" value="0"></el-option>
                        <el-option label="后端" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onPublish(false)">发表</el-button>
                    <el-button @click="onPublish(true)">存为草稿</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    import publishCover from './components/publish-cover'
    import {
        ElementTiptap,
        Doc,
        Text,
        Paragraph,
        Heading,
        Bold,
        Underline,
        Italic,
        Strike,
        ListItem,
        BulletList,
        OrderedList,
        Image,
        Preview,
        FontType,
        FontSize,
        Print
    } from 'element-tiptap'
    import 'element-tiptap/lib/index.css'

    export default {
        name: "publish",
        data() {
            return {
                article:{
                    id:'',
                    title:'',
                    content:'',
                    picture:{
                        type:0,// 封面类型 -1:自动，0-无图，1-1张，3-3张
                        image:[
                            /*require('../../assets/publish-cover/cover1.jpg'),
                            require('../../assets/publish-cover/cover2.jpg'),*/
                        ]
                    },
                    channel:'',
                    status: 1,//假数据，数据设计不为合理,下同
                    publishTime: '2020-05-25 09:30:55',
                    img_url:''
                },
                extensions: [
                    new Doc(),
                    new Text(),
                    new Paragraph(),
                    new Heading({ level: 5 }),
                    new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
                    new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
                    new Italic(),
                    new Strike(),
                    new ListItem(),
                    new BulletList(),
                    new OrderedList(),
                    new Image(),
                    new Preview(),
                    new FontType(),
                    new FontSize(),
                    new Print()
                ],
                rules: {
                    title:[
                        { required: true, message: '请输入标题', trigger: 'blur' },
                        { min: 2, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
                    ],
                    content:[
                        {
                            validator:(rule, value, callback)=>{
                                if (value !=='<p></p>') {
                                    // 验证通过
                                    callback()
                                } else {
                                    // 验证失败
                                    callback(new Error('请输入内容'))
                                }
                            },
                            trigger:'change'
                        },
                        { required: true, message: '请输入内容', trigger: 'blur' }
                    ],
                    channel:[
                        {
                            validator:(rule, value, callback)=>{
                                if (value) {
                                    // 验证通过
                                    callback()
                                } else {
                                    // 验证失败
                                    callback(new Error('请选择频道'))
                                }
                            },
                            trigger:'change'
                        },
                    ],
                }
            }
        },
        components: {'el-tiptap': ElementTiptap, 'publish-cover':publishCover},
        created() {
            const editId = this.$route.query.id
            if(editId){
                this.$store.state.articleData.forEach( item =>{
                    if(item.id === editId){
                        this.article.id = item.id
                        this.article.title = item.title
                        this.article.content = item.content
                        this.article.status = item.status
                        this.article.picture = item.picture
                    }
                })
            }
        },
        methods: {
            onPublish(draft=false){
                this.$refs["article"].validate((valid)=>{
                    //验证失败，返回
                    if (!valid) {
                        return
                    }
                    // 验证通过
                    this.Publish(draft)
                })
            },
            Publish(draft){
                if(draft) {
                    this.article.status = 0
                }
                if(this.article.id){
                    this.$store.state.articleData.forEach( item =>{
                        if(item.id === this.article.id){
                            item.title = this.article.title
                            item.content = this.article.content
                            item.status = this.article.status
                            item.picture = this.article.picture
                        }
                    })
                    return this.$router.push({name:"article"})
                }else{
                    this.article.id = this.$store.state.articleData.length + 1
                }
                //添加到数据最前面
                this.$store.state.articleData.splice(0, 0, this.article)
                this.$router.push({
                    name:"article"
                })
            }
        }
    }
</script>

<style scoped>
    .cover-box{
        display: flex;
    }
</style>
